<template>
  <van-cell-group>
    <van-field
      v-model="address.name"
      label="姓名"
      placeholder="请输入收货人姓名"
    />
    <van-field
      v-model="address.phone"
      label="手机号"
      type="tel"
      placeholder="请输入收货手机号"
    />
    <van-field
      v-model="address.addressDetail"
      label="详细地址"
      type="textarea"
      placeholder="请输入收货详细地址"
      rows="1"
      autosize
    />
    <!-- 省略城市和区县选择代码 -->
    <van-field
      v-model="address.areaCode"
      center
      label="区号"
      placeholder="区号"
    >
      <!-- 省略国家和地区选择按钮 -->
    </van-field>
    <van-field
      v-model="address.postalCode"
      label="邮政编码"
      placeholder="邮政编码"
    />
    <van-field
      v-model="address.defaultAddress"
      label="设为默认地址"
      type="switch"
      size="24px"
    />
    <van-field
      v-model="address.fullAddress"
      label="完整地址"
      readonly
      clickable
      @click="onFullAddressClick"
    />
  </van-cell-group>
</template>
   
  <script>
export default {
  data() {
    return {
      address: {
        name: "",
        phone: "",
        addressDetail: "",
        areaCode: "",
        postalCode: "",
        defaultAddress: false,
        fullAddress: "",
      },
    };
  },
  watch: {
    // 监听多个字段变化来更新完整地址
    "address.{name,phone,addressDetail,areaCode,postalCode}": {
      handler(val) {
        this.address.fullAddress = `${val.name} ${val.phone} ${val.addressDetail} ${val.areaCode} ${val.postalCode}`;
      },
      deep: true,
    },
  },
  methods: {
    onFullAddressClick() {
      // 处理点击完整地址的逻辑，例如复制到剪贴板
      console.log("Full address clicked:", this.address.fullAddress);
    },
  },
};
</script>